<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router unique-opened :default-active="$route.path">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-user"></i>用户管理</template
            >
            <el-menu-item-group title="用户">
              <el-menu-item index="/createUser">新增用户</el-menu-item>
              <el-menu-item index="/userList">用户列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i>任务管理</template
            >
            <el-menu-item-group>
              <template slot="title">任务</template>
              <el-menu-item index="/createTask">新增任务</el-menu-item>
              <el-menu-item index="/taskList">任务列表</el-menu-item>
            </el-menu-item-group>
            <!-- <el-menu-item-group title="任务审核">
              <el-menu-item index="/auditList">审核列表</el-menu-item>
              <el-menu-item index="/auditHistory">审核记录</el-menu-item>
            </el-menu-item-group> -->
            <el-menu-item-group title="消息">
              <el-menu-item index="/noticeList">消息列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="日志">
              <el-menu-item index="/journalList">日志列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-s-tools"></i>分类管理</template
            >
            <el-menu-item-group>
              <template slot="title">分类</template>
              <el-menu-item index="/createCate">新增分类</el-menu-item>
              <el-menu-item index="/CateList">分类列表</el-menu-item>
              <!-- <el-menu-item index="/CateExport">文件分类导出</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="head">
          <div class="left">
            <img src="../assets/logo.png" alt="" />
            <h3>学院双高管理系统</h3>
          </div>
          <div class="right">
            <div class="person">
              <span class="img">
                <img src="../assets/qqq.jpg" alt="" />
              </span>
              <span>{{ name }}</span>
            </div>
            <el-dropdown class="right" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down" style="margin-right: 5px"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">添加管理员</el-dropdown-item>
                <el-dropdown-item command="1">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span> | </span>
            <div class="out">
              <i class="el-icon-switch-button"></i>
              <el-dropdown-item class="outLogin" @click.native="out"
                >退出</el-dropdown-item
              >
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view :key="$route.path"></router-view>
        </el-main>
      </el-container>

      <!-- 新增管理员对话框 -->
      <el-dialog
        title="添加管理员"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-form
          :model="adminForm"
          ref="adminRefs"
          label-width="100px"
          size="normal"
        >
          <el-form-item label="用户名">
            <el-input
              v-model="adminForm.username"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="adminForm.password"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              type="password"
              v-model="adminForm.passwordConfirm"
              style="width: 250px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adminAdd">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改密码对话框 -->
      <el-dialog
        title="修改密码"
        :visible.sync="centerDialogVisibleModify"
        width="30%"
        center
      >
        <el-form
          :model="modify"
          ref="adminRefs"
          label-width="100px"
          size="normal"
        >
          <el-form-item label="用户名">
            <el-input v-model="modify.username" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="旧密码">
            <el-input
              type="password"
              v-model="modify.oldPassword"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              type="password"
              v-model="modify.newPassword"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              type="password"
              v-model="modify.passwordConfirm"
              style="width: 250px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisibleModify = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="adminModify">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      centerDialogVisibleModify: false,
      modify: {
        username: "",
        oldPassword: "",
        newPassword: "",
        passwordConfirm: "",
      },
      adminForm: {
        username: "",
        password: "",
        passwordConfirm: "",
      },
    };
  },
  methods: {
    //退出按钮
    out() {
      window.localStorage.clear();
      this.$router.push("/login");
    },
    // 下拉菜单
    handleCommand(command) {
      if (command == 0) {
        this.centerDialogVisible = true;
      }
      if (command == 1) {
        this.centerDialogVisibleModify = true;
      }
    },
    // 添加管理员
    async adminAdd() {
      if (this.adminForm.username == "" || this.adminForm.password == "") {
        this.$message({
          type: "error",
          message: "用户名/密码不能为空",
        });
        return;
      }

      if (this.adminForm.password != this.adminForm.passwordConfirm) {
        this.$message({
          type: "error",
          message: "两次密码不一致",
        });
        return;
      }
      let res = await this.$http.post("/other/adminUser", this.adminForm);
      if (res.data.status != "200") {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
        return;
      } else {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.centerDialogVisible = false;
      }
    },

    // 修改密码
    async adminModify() {
      if (
        this.modify.username == "" ||
        this.modify.oldPassword == "" ||
        this.modify.newPassword == ""
      ) {
        this.$message({
          type: "error",
          message: "用户名/密码不能为空",
        });
        return;
      }
      if (this.modify.newPassword != this.modify.passwordConfirm) {
        this.$message({
          type: "error",
          message: "两次密码不一致",
        });
        return;
      }
      let res = await this.$http.post("/other/adminUserModify", this.modify);
      if (res.data.status != "200") {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
        return;
      } else {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.centerDialogVisibleModify = false;
        this.out();
      }
    },
  },
  created() {
    this.modify.username = window.localStorage.admin;
  },
  computed: {
    name() {
      return window.localStorage.admin;
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #fff;
  color: #2e85af;
  line-height: 60px;
  border-bottom: 1px solid #d0d0d0;
}

.el-aside {
  color: #000;
}
.el-main {
  background-color: #fbfcfd;
}

.head {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    display: flex;
    margin-right: 10px;
    align-items: center;
    .person {
      display: flex;
      margin: 0 8px 0 15px;
      align-items: center;
      .img {
        width: 35px;
        height: 35px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #ddd;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 90%;
        }
      }
    }
    .out {
      display: flex;
      align-items: center;
      margin: 0 0 0 15px;
      i {
        margin-right: 8px;
      }
      .outLogin {
        color: #f56c6c;
        cursor: pointer;
        padding: 0 3px;
      }
    }
  }
}

.head img {
  width: 37px;
  height: 37px;
}
</style>